import { useLogin } from "@/hooks";
import { ref, computed, defineComponent } from "vue";

export default defineComponent({
  setup() {
    let loginForm = ref<loginFormTypes>({
      userName: "",
      passWord: "",
    });

    let { useLoginHandle, loading } = useLogin(loginForm);

    let loginFormRules = {
      userName: [
        {
          required: true,
          trigger: "blur",
          message: "请输入用户名",
        },
      ],
      password: [
        {
          required: true,
          trigger: "blur",
          message: "请输入密码",
        },
      ],
    };

    let loginFormRef = ref<
      Nullable<{
        validate: (validateFunc: (validate: Boolean) => void) => any;
      }>
    >(null);

    function resetting() {
      loginForm.value = {
        userName: "",
        passWord: "",
      };
    }

    function loginHandle() {
      if (loginFormRef.value) {
        loginFormRef.value.validate((validate) => {
          if (validate) {
            useLoginHandle();
          }
        });
      }
    }

    return () => (
      <>
        <div class="page flex justify-center items-center flex-col">
          <div class="mb-5">
            <ElText size="large">请先登录</ElText>
          </div>
          <ElForm
            model={loginForm.value}
            rules={loginFormRules}
            label-width="120px"
            ref={loginFormRef}
          >
            <ElFormItem label="用户名：" prop="userName">
              <ElInput v-model={loginForm.value.userName} />
            </ElFormItem>
            <ElFormItem label="密码：" prop="passWord">
              <ElInput v-model={loginForm.value.passWord} />
            </ElFormItem>
          </ElForm>
          <div class="mb5 justify-start items-center">
            <Button onClick={resetting} >重置</Button>
            <Button
             loading={loading.value}
             onClick={loginHandle}
             type="primary"
             >登录</Button>
          </div>
        </div>
      </>
    );
  },
});
